<template>
    <div>
      <div v-if="show">
        <div class="tinymceplus-model" @click="show=false"></div>
        <Tinymce style="position:relative;z-index:100000;" :value="value" @input="change" :height="height" :width="width"></Tinymce>
      </div>
       <div @click="show=true" class="tinymceplus-box" v-else v-html="value"></div>
    </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'

export default {
  name: 'TinymcePlus',
components: {
    Tinymce,
},
  props: {
    height:{
        type:[String,Number],
        default:100
    },
    width:{
        type:[String,Number],
        default:600
    },
    value:{
        type:String,
        default:''
    }
  },
  data() {
    return {
      show:false,
    };
  },
  mounted() {
    
  },
  methods: {
    change(e){
      this.$emit('input', e)
    }
  },
};
</script>
<style>
  .tinymceplus-box{
    width: 100%;
    min-height: 40px;
    padding:0 10px;
    border: 1px dotted;
    cursor: pointer;
  }
  .tinymceplus-box:hover{
    background-color:#fffde7;
  }
  .tinymceplus-box p{
    padding: 0;
    margin: 0;
  }
  .tinymceplus-model{
    position:fixed;
    top:0;
    bottom:0;
    right:0;
    left:0;
    z-index:1000
  }
</style>